<template>
    <div><div class="section tab-con tab-menu-box active">
      <p class="tCenter tips">授课方式：线下试听</p>
      <ol class="course-menu-lists">
            <li v-for='(link,index) in menulinks' :key="index">
                <router-link :to="'/detail/'+link.courseid"><p>{{link.coursename}}</p><i class="icon-right"></i></router-link>
            </li>
      </ol>
      <p class="tCenter more-course" @click="addMore">点击加载更多</p>
    </div>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  name: "menus",
  data() {
    return {
      menulinks: [],
      page: 1,
      pageSize: 10
    };
  },
  beforeRouteLeave(to, from, next) {
    console.log('点击的课程ID'+to.params.courseId);
    next();
    this.$nextTick(() => {
      this.setCourseId(to.params.courseId);
    });
    //this.setCourseId(to.params.courseId)
  },
  created() {
    let initpage = 1;
    this.$axios
      .get("https://www.easy-mock.com/mock/5b0266d995118136368f1a78/", {
        page: initpage,
        pagesize: this.pageSize
      })
      .then(res => {
        console.log("menu首次请求数据"+res.data);
        this.menulinks = res.data.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    ...mapMutations(["setCourseId"]),
    addMore() {
      this.page++;
      this.$axios
        .get("https://www.easy-mock.com/mock/5b0266d995118136368f1a78/", {
          page: this.page,
          pagesize: this.pageSize
        })
        .then(res => {
            var result=res.data.data;
          result.forEach((item)=>{
            this.menulinks.push(item);
          })
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style>
.tab-con.active {
  display: block;
}

.tab-menu-box {
  background-color: #fff;
}

.tab-menu-box .tCenter.tips {
  font-size: 0.28rem;
  color: #9e9e9e;
  padding: 0.2rem 0 0.25rem;
  border-bottom: 1px solid #e6e6e6;
}

ol.course-menu-lists {
  counter-reset: sectioncounter;
  padding: 0 0.2rem 0.2rem;
  border-bottom: 1px solid #e6e6e6;
}

.course-menu-lists li a {
  padding: 0.2rem 0.15rem 0.2rem 0;
  font-size: 0.28rem;
  color: #333333;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: space-between;
}

.course-menu-lists li a:active {
  background-color: #f5f5f5;
}

.course-menu-lists li a:not(:last-of-type) {
  border-bottom: 1px solid #e6e6e6;
}

.course-menu-lists li p {
  padding-right: 0.1rem;
  padding-left: 0.4rem;
  position: relative;
}

.course-menu-lists li p:before {
  display: block;
  height: 100%;
  content: counter(sectioncounter);
  counter-increment: sectioncounter;
  padding-right: 0.15rem;
  position: absolute;
  top: 0.05rem;
  left: 0;
  text-align: right;
}

.more-course {
  color: #32b16c;
  font-size: 0.26rem;
  padding: 0.26rem 0;
  cursor: pointer;
}
</style>

